<template>
  <div class="com-container">
    <div class="com-chart" ref="all_ref"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.updataChart)
  },
  mounted () {
    this.initChart()
    this.updataChart()
    window.addEventListener('resize', this.updataChart)
    this.updataChart()
  },
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.all_ref)
    },
    updataChart () {
      const option = {
        backgroundColor: '#F5F5F5',
        title: {
          text: '中国入选联合国教科文组织非物质文化遗产名录',
          subtext: '数据来源：中国非物质文化遗产网',
          x: 'center',
          y: '3%',
          textStyle: {
            fontFamily: 'sans-serif',
            fontSize: 22,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#646464',
            fontFamily: 'sans-serif',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `${params.name}<br/>入选年份：${params.data.year}<br/>类别：${params.data.category}`
          }
        },
        series: [
          {
            type: 'treemap',
            visibleMin: 1,
            data: [
              {name: '昆曲', value: 1, year: '2008', category: '人类非物质文化遗产代表作名录'},
              {name: '古琴艺术', value: 1, year: '2008', category: '人类非物质文化遗产代表作名录'},
              {name: '新疆维吾尔木卡姆艺术', value: 1, year: '2008', category: '人类非物质文化遗产代表作名录'},
              {name: '蒙古族长调民歌', value: 1, year: '2008', category: '人类非物质文化遗产代表作名录'},
              {name: '中国篆刻', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '中国雕版印刷技艺', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '中国书法', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '中国剪纸', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '中国传统木结构营造技艺', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '南京云锦织造技艺', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '端午节', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '中国朝鲜族农乐舞', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '妈祖信俗', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '蒙古族呼麦', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '南音', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '热贡艺术', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '中国传统桑蚕丝织技艺', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '龙泉青瓷传统烧制技艺', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '宣纸传统制作技艺', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '西安鼓乐', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '粤剧', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '花儿', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '玛纳斯', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '格萨（斯）尔', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '侗族大歌', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '藏戏', value: 1, year: '2009', category: '人类非物质文化遗产代表作名录'},
              {name: '羌年', value: 1, year: '2009', category: '急需保护的非物质文化遗产名录'},
              {name: '黎族传统纺染织绣技艺', value: 1, year: '2009', category: '急需保护的非物质文化遗产名录'},
              {name: '中国木拱桥传统营造技艺', value: 1, year: '2009', category: '急需保护的非物质文化遗产名录'},
              {name: '中医针灸', value: 1, year: '2010', category: '人类非物质文化遗产代表作名录'},
              {name: '京剧', value: 1, year: '2010', category: '人类非物质文化遗产代表作名录'},
              {name: '麦西热甫', value: 1, year: '2010', category: '急需保护的非物质文化遗产名录'},
              {name: '中国水密隔舱福船制造技艺', value: 1, year: '2010', category: '急需保护的非物质文化遗产名录'},
              {name: '中国皮影戏', value: 1, year: '2011', category: '人类非物质文化遗产代表作名录'},
              {name: '赫哲族伊玛堪', value: 1, year: '2011', category: '急需保护的非物质文化遗产名录'},
              {name: '福建木偶戏后继人才培养计划', value: 1, year: '2012', category: '优秀实践名册'},
              {name: '中国珠算', value: 1, year: '2013', category: '人类非物质文化遗产代表作名录'},
              {name: '二十四节气', value: 1, year: '2016', category: '人类非物质文化遗产代表作名录'},
              {name: '藏医药浴法', value: 1, year: '2018', category: '人类非物质文化遗产代表作名录'},
              {name: '太极拳', value: 1, year: '2020', category: '人类非物质文化遗产代表作名录'},
              {name: '送王船', value: 1, year: '2020', category: '人类非物质文化遗产代表作名录'},
              {name: '中国传统制茶技艺及其相关习俗', value: 1, year: '2022', category: '人类非物质文化遗产代表作名录'},
              {name: '春节', value: 1, year: '2024', category: '人类非物质文化遗产代表作名录'},
              {name: '羌年', value: 1, year: '2024', category: '人类非物质文化遗产代表作名录'},
              {name: '中国木拱桥传统营造技艺', value: 1, year: '2024', category: '人类非物质文化遗产代表作名录'},
              {name: '黎族传统纺染织绣技艺', value: 1, year: '2024', category: '人类非物质文化遗产代表作名录'}
            ],
            label: {
              show: true,
              formatter: '{b}'
            },
            upperLabel: {
              show: true,
              height: 30
            },
            itemStyle: {
              borderColor: '#fff'
            },
            levels: [
              {
                itemStyle: {
                  borderColor: '#777',
                  borderWidth: 0,
                  gapWidth: 1
                },
                upperLabel: {
                  show: false
                }
              },
              {
                itemStyle: {
                  borderColor: '#555',
                  borderWidth: 5,
                  gapWidth: 1
                },
                emphasis: {
                  itemStyle: {
                    borderColor: '#ddd'
                  }
                }
              },
              {
                colorSaturation: [0.35, 0.5],
                itemStyle: {
                  borderWidth: 5,
                  gapWidth: 1,
                  borderColorSaturation: 0.6
                }
              }
            ]
          }
        ]
      }
      this.chartInstance.setOption(option)
      this.chartInstance.resize()
    }
  }
}
</script>

<style>
</style>
